<template>
    <div>
        <span v-show="dataBaseInfo != ''">{{ dataBaseInfo }}</span>
        <van-grid clickable :column-num="4">
            <van-grid-item icon="bookmark-o" text="数据库信息" @click="daInfo" />
            <van-grid-item icon="label-o" text="创建测试表" @click="initTable" />
            <van-grid-item icon="sign" text="插入测试数据" @click="initData" />
            <van-grid-item icon="description" text="测试表数据" @click="queryDemo" />
            <van-grid-item icon="description" text="测试" @click="queryDemo2" />
           
        </van-grid>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="queryDemo">
            <van-cell v-for="item in demoList" :key="item.name" :title="item.name">
                <template>
                    <div style="display: flex;">
                        <span>名称：{{ item.name }}</span>
                        <span>数值：{{ item.score }}</span>
                    </div>
                </template>
            </van-cell>
        </van-list>

        <!-- <table border="1">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>描述</th>
                </tr>
            </thead>
            <tbody v-for="item in demoList">
                <tr>
                    <td>{{ item.name }}</td>
                    <td>{{ item.score }}</td>
                </tr>
            </tbody>
        </table> -->
    </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { Dialog } from 'vant';
import UserApi from '@/api/sys/user/index'


export default {
    name: "DataBase",
    setup() {
        const dbContext = ref(null);
        const dataBaseInfo = ref("")
        const demoList = ref([])
        const loading = ref(false);
        const finished = ref(false);
        const { getUserList, initUserTable } = UserApi;

        const daInfo = () => {
            dataBaseInfo.value = JSON.stringify(dbContext.value)
        }
        const initTable = () => {
            dbContext.value.transaction(function (tx) {
                tx.executeSql(`CREATE TABLE IF NOT EXISTS DemoTable (name, score)`);
                tx.executeSql('INSERT INTO DemoTable VALUES (?,?)', ['Alice', 101]);
            }, function (error) {
                Dialog.alert({
                    title: '初始化表错误：',
                    message: error.message,
                });
            }, function () {
                Dialog.alert({
                    title: '提示:',
                    message: '数据表数据化完成',
                });
            })
        }
        const initData = () => {
            dbContext.value.transaction(function (tx) {
                tx.executeSql('INSERT INTO DemoTable VALUES (?,?)', ['Alice', 101]);
            }, function (error) {
                Dialog.alert({
                    title: '插入错误:',
                    message: error.message,
                });
            }, function () {
                Dialog.alert({
                    title: '提示:',
                    message: '数据初始化完成',
                });
            })
        }
        const queryDemo = () => {
            loading.value = true;
            const sqlString = `SELECT name, score FROM DemoTable`;
            dbContext.value.transaction(function (tx) {
                tx.executeSql(sqlString, [], function (tx, rs) {
                    loading.value = false;
                    finished.value = false;
                    demoList.value = [];
                    for (let index = 0; index < rs.rows.length; index++) {
                        const element = rs.rows.item(index);
                        demoList.value.push(element)
                    }
                }, function (tx, error) {
                    loading.value = false;
                    finished.value = false;
                    Dialog.alert({
                        title: '错误:',
                        message: error.message,
                    });
                });
            });
        }
        function queryDemo2() {
            try {
                //initUserTable();
                getUserList().then(function (res) {
                    Dialog.alert({
                        title: '用户信息:',
                        message: JSON.stringify(res),
                    })
                }).catch(function (error) {
                    Dialog.alert({
                        title: '错误:',
                        message: error,
                    })
                });


            } catch (error) {
                Dialog.alert({
                    title: '错误:',
                    message: error,
                })
            }
        }
        onMounted(function () {
            try {
                dbContext.value = window.sqlitePlugin.openDatabase({
                    name: "ramac.db",
                    location: 'default',
                    androidDatabaseProvider: 'system'
                });
            } catch (error) {
                Dialog.alert({
                    title: '错误：',
                    message: error,
                })
            }
        })

        onUnmounted(function () {
            dbContext.value = null
        })
        return {
            dataBaseInfo,
            demoList,
            loading,
            finished,
            daInfo,
            initTable,
            queryDemo,
            initData,
            queryDemo2
        }
    }
}

</script>

<style></style>
